<script setup lang="ts">
// 需求: 不写死结构, 使用 h函数 + render函数实现 h2标签在页面挂载
// h函数 + render函数 可以 将一个虚拟DOM对象挂载到真实DOM结构中
// h函数能创建一个VNode虚拟DOM, 也叫createVNode, 别名 h函数
import { h, onMounted, render } from 'vue'
// h函数解说三个参数
// 参数1: 是 html标签或者是组件
// 参数2: 是一个对象或者null, 如果写一个对象, 这个对象中一些属性是对标签或组件的描述
// 参数3: 是一个字符串或者是数组, 是创建的标签中的内容
const VNode = h('h2', { id: 'header', className: 'title' }, '我是使用H函数创建的h2')
console.log(VNode)

// render函数接收两个参数
// 参数1 就是要渲染的虚拟DOM对象
// 参数2: 往哪个位置渲染, dom元素
onMounted(() => {
  render(VNode, document.querySelector('#box')!)
})
</script>
<template>
  <div id="box">
    <!-- <h2 class="title" id="header">标题</h2> -->
  </div>
</template>



<style scoped>
</style>